<template>
  <div>
    <el-container class="header">
      <!-- 头 -->
      <el-header class="father">
        <!-- 搜索栏 -->
        <KeywordSearch @search="search"></KeywordSearch>

        <!-- 新增用户表单 -->
        <el-button
          class="added"
          type="success"
          icon="el-icon-edit"
          @click="openDrawer('add')"
          >新增用户</el-button
        >
        <el-dialog
          :title="drawerTitle"
          :visible.sync="dialogFormVisible"
          width="520px"
        >
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="用户名" label-width="120px" prop="username">
              <el-input v-model="form.username" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="120px" prop="email">
              <el-input v-model="form.email" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="120px" prop="password">
              <el-input v-model="form.password" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="角色" label-width="120px">
              <el-input v-model="form.role" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item
              label="权限组名称"
              label-width="120px"
              prop="Permission"
            >
              <el-select
                v-model="form.permission_group_id"
                style="width: 280px"
                placeholder="请选择"
              >
                <el-option
                  :label="item.permission_group_id"
                  :value="item.permission_group_id"
                  v-for="item in tableData.list"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" label-width="120px">
              <el-input v-model="form.phone" style="width: 280px"></el-input>
            </el-form-item>
            <el-form-item label="介绍" label-width="120px">
              <el-input
                type="textarea"
                v-model="form.introduction"
                style="width: 280px"
                placeholder="Please input"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" style="margin-right: 190px">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>
      </el-header>

      <!-- 身体 -->
      <el-main class="tbody">
        <!-- 数据条数 -->
        <div class="recording">
          <span
            ><i class="el-icon-info"> </i> 共
            {{ tableData.counts }} 条记录</span
          >
        </div>

        <!-- table表格数据区域 -->
        <el-table :data="list" style="width: 100%" stripe v-loading="loading">
          <el-table-column prop="id" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center">
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="center">
          </el-table-column>
          <el-table-column
            prop="introduction"
            label="权限组名称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="role" label="角色" align="center">
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <!-- 表格子项的作用域插槽 -->
            <template #default="{ row }">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  plain
                  circle
                  @click="openDrawer('edit', row.id)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  plain
                  circle
                  @click="del(row.id)"
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件区域 -->
        <el-row type="flex" style="height: 60px" align="middle" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryObj.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="queryObj.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="tableData.counts"
          >
          </el-pagination>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import KeywordSearch from '@/module-manage/components/public/KeywordSearch'
import { list, add, update, detail, remove } from '@/api/base/users.js'

export default {
  components: {
    KeywordSearch
  },
  data () {
    return {
      loading: false,
      dialogFormVisible: false,
      drawerType: 'add',
      tableData: {},
      list: [],
      queryObj: {
        page: 1, // 控制当前页
        pagesize: 10, // 控制每页有几条数据
        username: ''
      },
      form: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: '',
        avatar: ''
      },
      id: 0,
      // 验证规则
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    // 获取table数据
    async initTable () {
      this.loading = true
      const { data } = await list(this.queryObj)
      this.tableData = data
      this.list = data.list
      this.loading = false
    },

    // 提交表单
    async submit () {
      try {
        await this.$refs.form.validate()
        if (this.drawerType === 'add') {
          // 发起添加请求
          await add(this.form)
        }
        if (this.drawerType === 'edit') {
          // 发起修改请求
          await update({ id: this.id, ...this.form })
        }
        this.form.username = ''
        this.form.email = ''
        this.form.password = ''
        this.form.role = ''
        this.form.permission_group_id = ''
        this.form.phone = ''
        this.form.introduction = ''

        // 关闭表单框
        this.dialogFormVisible = false

        // 提示用户
        this.$message.success(
          this.drawerType === 'add' ? '添加成功' : '修改成功'
        )

        // 重新获取新的数据渲染页面
        this.initTable()
      } catch (error) {
        this.$message.error('请输入必填项')
      }
    },

    // 打开编辑功能
    async openDrawer (type, id) {
      this.drawerType = type
      this.dialogFormVisible = true
      if (type === 'edit') {
        this.id = id
        const { data } = await detail({ id })
        this.form.username = data.username
        this.form.email = data.email
        this.form.role = data.role
        this.form.permission_group_id = data.permission_group_id
        this.form.phone = data.permission_group_id
        this.form.introduction = data.permission_group_id
      }
    },

    // 删除功能
    async del (id) {
      try {
        await remove({ id })
        this.$message.success('删除成功')
        this.initTable()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 分页功能
    // pagesize改变时会触发
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initTable()
    },
    // page当前页改变时会触发
    async handleCurrentChange (val) {
      // 改变参数对象中的当前页
      this.queryObj.page = val
      this.initTable()
    },
    // 关键词搜索
    async search (input) {
      this.queryObj.username = input
      this.initTable()
    }
  },
  computed: {
    drawerTitle () {
      if (this.drawerType === 'add') return '创建用户'
      if (this.drawerType === 'edit') return '编辑用户'
      else {
        return 'add'
      }
    }
  }
}
</script>

<style scoped lang="less">
.header {
  background-color: #fff;
  margin: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px #ccc;
  .father {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    height: 100px;
    .added {
      height: 36px;
      width: 96px;
      font-size: 12px;
      padding-left: 11px;
    }
  }
}
.tbody {
  .recording {
    height: 35px;
    width: 100%;
    padding: 8px 16px;
    background-color: #f4f4f5;
    border-radius: 5px;
    span {
      font-size: 13px;
      color: #909399;
    }
  }
}
</style>
